<template>
    <div class="ar-container">
        <div class="video-container">
            <!-- 使用img标签直接显示视频流 -->
            <img :src="videoFrame" alt="AR Video Stream" class="ar-video" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 视频帧数据 - 保持ref响应式
const videoFrame = ref('');
// WebSocket相关变量
const socket = ref(null);

// 初始化WebSocket连接
const initWebSocket = () => {
    // 连接到后端WebSocket服务器
    socket.value = new WebSocket('ws://localhost:8083');

    // 设置接收数据模式为arraybuffer（二进制）
    socket.value.binaryType = 'arraybuffer';

    // 连接成功处理
    socket.value.onopen = () => {
        console.log('WebSocket连接成功');
        // 发送测试消息给服务器
        socket.value.send(JSON.stringify({ client: 'ARView', type: 'connection_test' }));
    };

    // 接收消息处理
    socket.value.onmessage = (event) => {
        try {
            console.log('收到消息:', event);

            // 尝试将event.data视为字符串并解析为JSON
            let data;
            if (typeof event.data === 'string') {
                data = JSON.parse(event.data);
                console.log('解析后的数据:', data);

                // 检查数据格式
                if (data && typeof data === 'object') {
                    // 新增：检查是否包含'frame'字段
                    if ('frame' in data) {
                        // 如果是base64格式的帧数据
                        if (typeof data.frame === 'string') {
                            console.log('收到视频帧数据, 数据长度:', data.frame.length);
                            videoFrame.value = `data:image/jpeg;base64,${data.frame}`;
                        } else {
                            console.warn('frame字段不是字符串类型:', typeof data.frame);
                        }
                    } else {
                        console.warn('收到的数据中没有frame字段:', data);
                    }
                } else {
                    console.warn('解析后的数据不是对象:', data);
                }
            } else {
                console.warn('收到非ArrayBuffer且非字符串数据:', event.data);
            }

        } catch (error) {
            console.error('处理WebSocket数据失败:', error);
            console.log('原始数据:', event.data);
        }
    };

    // 错误处理
    socket.value.onerror = (error) => {
        console.error('WebSocket错误:', error);
    };
};

// 组件挂载时初始化
onMounted(() => {
    initWebSocket();
});

// 组件卸载时清理
onUnmounted(() => {
    if (socket.value) {
        socket.value.close();
    }
});
</script>

<style scoped>
.ar-container {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.video-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.ar-video {
    width: 640px;
    height: 480px;
    object-fit: cover;
}
</style>